<template>
    <div class="upload-wrapper" style="display:inline">
        <Upload
            ref="upload"
            :action="uploadAction"
            :show-upload-list="false"
            :on-format-error="handleFormatError"
            :format="getFormat()"
            :on-success="handleSuccess"
            :on-progress="getProgress"
            :headers="uploadHeader"
            :before-upload="handleUpload"
            footer-hide
            style="display:inline"
        >
            <Button
                icon="ios-cloud-upload-outline"
                :disabled="uploadList[0] && uploadList[0].status != 'finished'"
                >导入文件</Button
            >
        </Upload>
        <WarningTip
            placement="right"
            :content="`请导入${this[this.bucket].format.join('，')}等格式文件`"
        ></WarningTip>
        <!-- <span class="warn-tip"
            ><Icon type="ios-alert-outline" />请导入{{
                this[this.bucket].format.join('，')
            }}等格式文件</span
        > -->
        <!-- ,文件大小不能超过20M -->
        <div class="demo-upload-list" v-for="item in uploadList" :key="item.name">
            <!--{{item}}-->
            <template v-if="item.status === 'finished'"> </template>
            <template v-else>
                <span style="margin-right:5px;">文件名：{{ item.name }}</span>
                <span style="margin-right:5px;">文件大小：{{ getFileSize(item.size) }}</span>
                <span style="margin-right:5px;">导入速度：{{ speed }}</span>
                <Progress
                    v-if="item.showProgress"
                    :percent="item.percentage"
                    hide-info
                    :stroke-width="2"
                ></Progress>
            </template>
        </div>
        <p class="error-tip" v-if="showTip">
            文件格式错误，请导入{{ this[this.bucket].format.join(',') }}等格式文件
        </p>
    </div>
</template>
<script>
import encryption from '@/libs/encryption.js';
export default {
    name: 'UploadFile',
    props: ['bucket'],
    data() {
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        return {
            fileList: [],
            formValidate: {
                chaId: this.chaId
            },
            uploadAction: `/api/minio/upload/permanent?visibility=person&type=${this.bucket}&bucket=${this.bucket}`,
            uploadHeader: {
                Authorization: localStorage.token,
                Accept: '*/*'
            },
            showTip: false,
            speed: 0,
            fileName: '',
            file: '',
            uploadList: [],
            images: {
                format: ['jpeg', 'jpg', 'png']
            },
            docs: {
                format: ['pdf', 'doc', 'docx', 'md']
            },
            courseware: {
                format: ['pdf', 'doc', 'docx', 'ppt', 'pptx']
            },
            videos: {
                format: [
                    'mp4',
                    'webm',
                    // 'ogv',
                    'ogg'
                    // '3gp',
                    // '3g2'
                    // 'm4v',
                    // 'mpg',
                    // 'vob',
                    // 'fli',
                    // 'mkv',
                    // 'asf',
                    // 'asx',
                    // 'wmv',
                    // 'flv',
                    // 'avi'
                ]
            },
            imageArr: ['jpeg', 'jpg', 'png'],
            docsArr: ['pdf', 'doc', 'docx', 'xla', 'pptx', 'pps', 'ppt', 'rtf', 'txt', 'md'],
            othersArr: ['zip', 'bz2', '7z', 'cab', 'rar', 'epub'],
            videoArr: [
                'mp4',
                'webm',
                'ogv',
                'ogg',
                '3gp',
                '3g2',
                'm4v',
                'mpg',
                'vob',
                'fli',
                'mkv',
                'asf',
                'asx',
                'wmv',
                'flv',
                'avi'
            ],
            audioArr: [
                'm4a',
                'sil',
                'ra',
                'ram',
                'au',
                'wma',
                'aiff',
                'mp3',
                'mid',
                'midi',
                'rmi',
                'oga',
                'wav',
                'caf',
                'flac',
                'adp',
                'aac'
            ]
        };
    },
    computed: {},
    filters: {},
    watch: {
        show: function(show) {
            if (show) {
                this.showTip = false;
            }
        }
    },
    methods: {
        getFormat() {
            console.log(this[this.bucket].format);
            return this[this.bucket].format;
        },
        handleFormatError(sss) {
            this.showTip = true;
        },
        handleUploadSize() {},
        hideTip() {
            this.showTip = false;
        },
        handleUpload(file) {
            this.uploadList = this.$refs.upload.fileList;
            return;
            if (
                (file.name || file.type).toLowerCase().indexOf('bat') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('exe') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('com') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('vbs') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('vbe') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('js') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('jse') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('wsh') != -1 ||
                (file.name || file.type).toLowerCase().indexOf('wsf') != -1
            ) {
                this.showTip = true;
                return false;
            }
            let exceededNum = file.name.lastIndexOf('.');
            let exceededStr = file.name
                .substring(exceededNum + 1, file.name.length)
                .trim()
                .toLowerCase();
            let type = exceededStr;
            let imageArr = ['jpg', 'jpeg', 'png'];
            let docArr = ['doc', 'docx', 'pdf'];
            let otherArr = ['zip', 'rar'];
            if (imageArr.includes(type)) {
                this.fileBucket = 'images';
                this.uploadAction = `/api/minio/upload/permanent?visibility=company&type=images&bucket=images`;
            } else if (docArr.includes(type)) {
                this.fileBucket = 'docs';
                this.uploadAction = `/api/minio/upload/permanent?visibility=company&type=docs&bucket=docs`;
            } else if (otherArr.includes(type)) {
                this.fileBucket = 'files';
                this.uploadAction = `/api/minio/upload/permanent?visibility=company&type=files&bucket=files`;
            }
            this.fileName = file.name;
            this.showTip = false;
            let promise = new Promise((resolve) => {
                this.$nextTick(function() {
                    resolve(true);
                });
            });
            return promise;
        },
        getFileSize(size) {
            let fileSize;
            if (size > 1024 * 1024) {
                fileSize = (Math.round((size * 100) / (1024 * 1024)) / 100).toString() + 'MB';
            } else {
                fileSize = (Math.round((size * 100) / 1024) / 100).toString() + 'KB';
            }
            return fileSize;
        },
        getProgress(progressEvent) {
            var aaspeed = Number(progressEvent.loaded - this.loaded) || 0;
            this.loaded = progressEvent.loaded;
            if (aaspeed > 1024 * 1024) {
                this.speed =
                    (Math.round((aaspeed * 100) / (1024 * 1024)) / 100).toString() + 'MB/s';
            } else {
                this.speed = (Math.round((aaspeed * 100) / 1024) / 100).toString() + 'KB/s';
            }
        },
        handleSuccess(file) {
            this.showTip = false;
            if (file.code === 1) {
                this.$emit('on-success', file, this.bucket);
            } else {
                this.$Message.error('文件导入失败');
            }
        }
    },
    mounted() {
        // if (this.initFile)            let info = this.curSaveFile.info || {};
        //     this.fileName = info.originalName;
        //     this.file = JSON.parse(JSON.stringify(this.curSaveFile));
        // }
    },
    created() {}
};
</script>
<style>
.chose-wrap {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    background-color: rgba(0, 0, 0, 0.3);
    align-items: center;
    margin-top: 10px;
}

.chose-name {
    width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chose-s-icon {
    width: 15px;
    height: 17px;
    display: inline-block;
    margin-bottom: 1px;
    margin-right: 10px;
}

.chose-s2-icon {
    width: 13px;
    height: 15px;
    display: inline-block;
    margin-bottom: 1px;
    margin-right: 10px;
}
.warn-tip {
    color: #f90;
    word-break: break-all;
}
.error-tip {
    color: #ed4014;
}
</style>
